import React, {Component} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
    Alert
} from 'react-native';
import NavigationBar from "../../common/NavigationBar";
import ViewUtil from "../../util/ViewUtil";
import LanguageDao, {FLAG_LANGUAGE} from '../../expand/Dao/LanguageDao';
import CheckBox from 'react-native-check-box';

import {THEMECOLOR} from "../../config/main";
import ArrayUtil from "../../util/ArrayUtil";

export default class CustomerKeysPage extends Component {
    constructor(props) {
        super(props)
        this.isRemoveKey = this.props.isRemoveKey
        this.languageDao = new LanguageDao(this.props.flag)
        this.changeValues = []
        this.flagTypeZh = FLAG_LANGUAGE.flag_key === this.props.flag ? '标签' : '语言'
        this.state = {
            dataArray: [],
        }
    }

    componentDidMount() {
        this.loadDao()
    }

    onSave() {
        if (this.changeValues.length === 0) {
            this.props.navigator.pop()
            return;
        }

        if (this.isRemoveKey) {
            for (let i = 0, l = this.changeValues.length; i < l; i++) {
                ArrayUtil.remove(this.state.dataArray, this.changeValues[i])
            }
        }

        this.languageDao.save(this.state.dataArray)
        this.props.navigator.pop()
    }

    onBack() {
        if (this.changeValues.length === 0) {
            this.props.navigator.pop()
            return;
        }
        Alert.alert(
            '提示',
            '要保存修改吗？',
            [
                {
                    text   : '不保存',
                    onPress: () => {
                        this.props.navigator.pop();
                    },
                    style  : 'cancel'
                },
                {
                    text   : '保存',
                    onPress: () => {
                        this.onSave()
                    },

                }
            ]
        )
    }

    loadDao() {
        this.languageDao.fetch().then((data) => {
            this.setState({
                dataArray: data
            })
        }).catch((error) => {
            console.log(error);
        });
    }

    onClick(data) {
        data.checked = !data.checked
        // 标记有没有改变
        ArrayUtil.updateArray(this.changeValues, data)
    }

    renderCheckbox(data) {
        let leftText = data.name
        return (
            <CheckBox
                onClick={() => {
                    this.onClick(data)
                }}
                isChecked={this.isRemoveKey ? false : data.checked}
                leftText={leftText}
                checkedImage={<Image style={{tintColor: THEMECOLOR}}
                                     source={require('../../../res/images/ic_check_box.png')}/>}
                unCheckedImage={<Image style={{tintColor: THEMECOLOR}}
                                       source={require('../../../res/images/ic_check_box_outline_blank.png')}/>}
            />
        )
    }

    renderView() {
        if (!this.state.dataArray || this.state.dataArray.length === 0) return false;
        let views = [];
        this.state.dataArray.forEach((val, key) => {
            views.push(
                <View key={key} style={styles.viewCell}>
                    {this.renderCheckbox(val)}
                </View>
            )
        })
        return <View style={styles.viewBox}>{views}</View>
    }

    render() {

        let rightButton = (
            <TouchableOpacity
                onPress={() => {
                    this.onSave()
                }}
            >
                <View style={{margin: 10}}>
                    <Text style={styles.title}>{this.isRemoveKey ? '移除' : '保存'}</Text>
                </View>
            </TouchableOpacity>
        )
        return (
            <View>
                <NavigationBar
                    title={this.isRemoveKey ? `移除${this.flagTypeZh}` : `自定义${this.flagTypeZh}`}
                    leftButton={ViewUtil.goBackButton(() => this.onBack())}
                    rightButton={rightButton}
                />
                <ScrollView>
                    {this.renderView()}
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    title   : {
        fontSize: 20,
        color   : 'white'
    },
    viewBox : {
        flexWrap: 'wrap'
    },
    viewCell: {
        flex   : 1,
        padding: 5
    }
})